

import { Modal, Stepper, Toast, Checkbox, Button } from 'antd-mobile'
import { any } from 'prop-types'
import React, { FC, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Link, useNavigate } from 'react-router-dom'
import { Http } from '../../api'
import MyHead from '../../components/MyHead'
import { getMyCart } from '../../redux/actions'
import "./index.scss"
const Cart: FC<any> = ({
  //下面解构后，这里也需要
  userInfo,
  myCart,
  dispatch,
}) => {
  const router = useNavigate()
  const [quan, setQuan] = useState<boolean>(false)  //全选、反选
  const [total, setToal] = useState<number>(0)  //  结算总数量
  const [amount, setAmount] = useState<number>(0) //结算的总价


// 解决异步(此方法不行)
const fetchMyApi = async()=>{
  let res:any = await Http.getuserinfo()
  if (res.code == 200) {
    console.log(res);
  }
  console.log(res);
  
}


  // 请求数据    存在异步问题
  useEffect(()=>{
    fetchMyApi();
    // Http.getuserinfo()
    console.log(userInfo)
    if(userInfo){
        // 请求购物车 
        dispatch(getMyCart({
            phone:userInfo.phone 
        }))
    }else{
        Modal.confirm({
            content:"请你先登录哦!",
            title:"提示",
            onConfirm:()=>{
                router("/login")
            }
        })
    }
},[])
  // 修改购物车的数量
  const changeItemCount = async (count: any, item: any, index: any) => {
    let res: any = await Http.setcart({
      // 购物车里面的 _id 和 数量
      _id: item._id,
      count: count
    })
    if (res.code == 200) {
      // Toast.show({
      //   content:"商品数量已修改"
      // })

      // // 前端修改，此种修改会浪费 ajax 成本
      //       dispatch(getMyCart({
      //           phone:userInfo.phone 
      //       }))

      item.count = count;    // 修改数量
      myCart.splice(index, 1, item);  //删除第一项 后面的覆盖
      dispatch({
        // 直接获取 actions 里面的数据
        type: "getMyCart",
        payload: [...myCart]  //深复制 刷新页面  前端页面刷新 
      })
    }
  }

  // 修改单个选中 
  const changeOneCheck = async (value: any, item: any, index: any) => {
    // console.log(value,item,index);

    let res: any = await Http.setcart({
      _id: item._id,
      check: value,
    })
    if (res.code == 200) {
      Toast.show({
        content: "修改成功"
      })
      item.check = value;
      myCart.splice(index, 1, item);  //删除一个，新增一个
      console.log(myCart);
      dispatch({
        type: "getMyCart",
        payload: [...myCart]
      })

    }
  }
  useEffect(() => {
    // 此处 用于监听 值 的改变
    console.log('123123')
    setQuan(myCart.every((item: any) => item.check)) //选中  //every 里面的数据 全部为真时才为true 有一个为假，就都为假

    // reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
    // prev 上一次的值                                    //prev+item.check?item.count:0 (上一次的值 + 选中值 的 数量 如果没有 就 + 0)
    setToal(myCart.reduce((prev: any, item: any, index: any) => (prev + (item.check ? item.count : 0)), 0))  //总数量
    setAmount(myCart.reduce((prev: any, item: any, index: any) => (prev + (item.check ? item.count * item.good.price * item.good.discount / 10 : 0)), 0))  //总价格


  }, [myCart])
  const changeQuan = async (value: boolean) => {
    // 修改后端  后端给所有
    let res: any = await Http.setcart({
      // 修改我的（个人的）以 phone 条件来查
      phone: userInfo.phone,
      check: value
    })
    // 修改前端
    if (res.code = 200) {
      Toast.show({
        content: "修改成功"
      })

      var list = myCart.map((val: any) => {   //map（返回一个新的数组）
        val.check = value;
        return val;
      })
      dispatch({
        // 拿到数据
        type: "getMyCart",
        payload: [...list]
      })
    }
  }

  // 结算
  const gopayorder=async()=>{
    router("/payorder?amount="+amount.toFixed(2))
    // 选中 商品所有的信息
    // let res:any = await Http.addpayorder({
    //   phone:userInfo.phone,
    // })
    // console.log(res);
 
    let res:any=await Http.getcart({
      phone:userInfo.phone,
      
    })
    console.log(res);
    
  }
  return (
    <div style={{ paddingBottom: '150px' }}>
      <MyHead title="购物车" back={false} />
      <div style={{ padding: 30 }}>
        {
          myCart.map((item: any, index: number) => {
            return (
              <div key={index} style={{ display: 'flex', width: "100%", marginTop: 30, color: 'black' }}>
                <Checkbox checked={item.check} onChange={(value) => changeOneCheck(value, item, index)} style={{ marginRight: 20 }}></Checkbox>
                <img src={item.good.img} alt="" style={{ width: 220, height: 250, marginRight: 30 }} />
                <div >
                  <h3 >{item.good.name}</h3>
                  <p>单价：{item.good.price}</p>
                  <p>折扣：{item.good.discount}折</p>
                  <div>
                    <Stepper
                      min={1}
                      defaultValue={item.count}
                      onChange={(value: any) => {
                        // 数量
                        changeItemCount(value, item, index)
                      }}
                    />
                  </div>
                  <p>总价： {Math.round(item.good.price * item.good.discount * item.count / 10).toFixed(2)}</p>
                  {/* {Math.round(data.price * data.discount / 10 * count).toFixed(2)} */}
                  <p>分类：{item.good.type.text}</p>
                </div>
              </div>
            )
          })
        }
      </div>

      <div className="ftbom" style={{ padding: "40px 20px", display: 'flex', alignItems: 'center' ,justifyContent:'space-between'}}>
        <div className="all">
          <Checkbox checked={quan} onChange={changeQuan} style={{ marginRight:10}}>全选/反选</Checkbox>
        </div>
        <div className="total" style={{ padding: "0 20px" }}>
          总数量<span style={{ color: 'red', fontSize: 50}}>{total}</span>
        </div>
        <div>
          <Button color="danger" onClick={gopayorder} >结算({amount.toFixed(2)})元</Button>
                                    
        </div>
      </div>

    </div>

  )
}

export default connect(
  // 拿到数据
  (state: any) => {
    console.log(state);
    return {
      // 得到数据后 解构  这里解构后，上面也需要
      userInfo: state.getIn(['data', 'userInfo']),
      myCart: state.getIn(['data', 'myCart'])
    }

  }
)(Cart)